<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#000001"
      text-color="#ffffff"
      active-text-color="#20a00f"
      router
    >
      <template v-for="item in items">
        <template>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            {{item.title}}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '@/assets/js/bus'
export default {
    name: 'AsideIndex',
    components: {},
    props: {},
    data () {
      return {
        collapse: false,
        items: [
          {
            icon: 'el-icon-document',
            index: 'Info',
            title: '系统首页'
          },
          {
            icon: 'el-icon-document',
            index: 'Consumer',
            title: '用户管理'
          },
          {
            icon: 'el-icon-document',
            index: 'Singer',
            title: '歌手管理'
          },
          {
            icon: 'el-icon-document',
            index: 'SongList',
            title: '歌单管理'
          }
        ]
      }
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/','');
      }
    },
    watch: {},
    created () {
      // 使用 Bus 进行组件间的通信，来折叠侧边栏，on 为接受
      bus.$on('collapse', msg => {
        this.collapse = msg
      })
    },
    methods: {}
}
</script>
<style>
.sidebar {
  display: block;
  position: absolute;  /* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 left: 0*/
  left: 0;
  top: 70px;
  bottom: 0;
  background-color: rgb(7, 7, 7);
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 150px;
}
.sidebar >ul {
  height: 100%;
}
</style>